<template>
    <div class="payment-card-page">
        <!-- 页面头部 -->
        <TopNav
                title="我要投诉"
                :showBack="true"
                :showAdd="false"
        />
        <!-- 表单区域 -->
        <van-form
                label-align="top"
                @submit="handleSubmit"
                @failed="handleFormError"
                class="payment-form"
        >


            <!-- 投诉订单 -->
            <van-field
                    v-model="formData.productName"
                    name="productName"
                    placeholder="请选择要投诉的订单"
                    :rules="[{ required: true, message: '请选择要投诉的订单' }]"
                    readonly
                    is-link
                    clickable
                    @click="showBankPicker = true"
                    class="form-field"
            >
                <template #label>
                    投诉订单<span class="required"> *</span>
                </template>
            </van-field>


            <!-- 投诉原因 -->
            <van-field
                    v-model="formData.reason"
                    name="reason"
                    :rules="[{ required: true, message: '请输入投诉原因' }]"
                    class="form-field"
                    type="textarea"
                    placeholder="请输入投诉原因"
            >
                <template #label>
                    投诉原因<span class="required"> *</span>
                </template>
            </van-field>

            <!-- 您的诉求 -->
            <van-field
                    v-model="formData.demand"
                    name="demand"
                    :rules="[{ required: true, message: '请输入您的诉求' }]"
                    class="form-field"
                    type="textarea"
                    placeholder="请输入您的诉求"
            >
                <template #label>
                    您的诉求<span class="required"> *</span>
                </template>
            </van-field>



            <!-- 提交按钮 -->
            <div class="form-actions">
                    <MyButton text="提交" />
            </div>
        </van-form>

        <!-- 银行选择器弹窗 -->
        <van-popup v-model:show="showBankPicker" position="bottom" round>
            <van-search
                    v-model="searchBankText"
                    placeholder="搜索订单"
                    @blur="onSearchBank"
                    @search="onSearchBank"

            />
            <van-picker
                    title="选择订单"
                    :columns="orders"
                    @confirm="onOrderConfirm"
                    @cancel="showBankPicker = false"
            />
        </van-popup>


        <!-- 提示信息 -->
        <van-toast id="van-toast"/>
    </div>
</template>

<script>
    import TopNav from "@/components/TopNav.vue";
    import MyButton from "@/components/MyButton.vue";
    import { toast } from '@/utils/toast';
    import { addComplaint } from '@/api/index.js'



    export default {
        components: {
            TopNav, // 注册
            MyButton
        },

        data() {
            return {
                // 弹窗控制
                showBankPicker: false,
                searchBankText:'',

                orders: [
                    { id: "001", text: "订单001" },
                    { id: "002", text: "订单002" },
                    { id: "003", text: "订单003" }
                ],
                formData: {
                    productName:'',
                    orderId: "",
                    reason: "",
                    demand: ""
                }

            };
        },
        methods: {
            // 返回上一页
            handleBack() {
                // 实际项目中使用路由返回
                // this.$router.back();
            },

            // 处理表单提交
            async handleSubmit(values) {
                console.log('表单提交:', values);
                let res = await addComplaint(this.formData);
                if(res.code === 200){
                    toast("投诉成功，请耐心等待3个工作日");
                    this.formData = { productName:"",orderId: "", reason: "", demand: "" };
                }
            },

            // 处理表单验证失败
            handleFormError(errorInfo) {
                console.log('表单验证失败:', errorInfo);
            },

            // 取消操作
            handleCancel() {
                // 实际项目中可以重置表单或返回
                // this.$router.back();
            },


            // 选择银行确认
            onOrderConfirm(value) {
                console.log('value===', value)
                this.formData.productName = value.selectedOptions[0].text;
                this.formData.orderId = value.selectedOptions[0].id;
                this.showBankPicker = false;
            },



        },
        mounted() {
        }
    };
</script>

<style scoped>
    .payment-card-page {
        background-color: #f5f5f5;
        min-height: 100vh;
    }

    .page-header {
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .payment-form {
        background-color: #ffffff;
        margin-top: 10px;
        padding: 0 16px;
    }

    .card-type-group {
        display: flex;
        padding: 16px 0;
        border-bottom: 10px solid #eee;
    }

    .card-type-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-icon {
        margin-right: 8px;
        color: #1989fa;
    }

    .form-field {
        border-bottom: 1px solid #eee;
    }

    .form-actions {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    .cancel-btn {
        background-color: transparent;
        color: #666;
    }

    .bank-picker-popup {
        width: 100%;
    }

    .required {
        color: red;
        margin-right: 4px;
    }

    .color-btn{
        background: linear-gradient(90deg, #407fff, #1a60d0);
    }
    /* 确保光标在移动端居中 */
    .van-search__field {
        height: 36px;
        line-height: 36px;
    }
    .van-search__input {
        height: 100%;
        line-height: 36px;
        font-size: 16px;
        padding: 0 10px;
    }



</style>
